<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间统计图表</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .input-shadow {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            }
            .chart-container {
                position: relative;
                height: 400px;
                width: 100%;
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="container mx-auto px-4 py-8 max-w-6xl">
    <h1 class="text-3xl font-bold text-gray-800 mb-6 flex items-center">
        <i class="fa fa-bar-chart mr-3 text-primary"></i>时间统计图表
    </h1>

    <!-- JSON输入区域 -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
        <h2 class="text-xl font-semibold text-gray-700 mb-4">JSON数据输入</h2>
        <textarea id="jsonInput" class="w-full h-48 p-3 border border-gray-300 rounded-md input-shadow focus:ring-2 focus:ring-primary/50 focus:border-primary transition duration-300" placeholder="请输入JSON数据...">
[
  {
    "category": "工作",
    "details": "fish",
    "total": 393
  },
  {
    "category": "学习",
    "details": "Time Recorder",
    "total": 575
  },
  {
    "category": "工作",
    "details": "准备阶段",
    "total": 714
  },
  {
    "category": "日常",
    "details": "洗澡",
    "total": 1540
  },
  {
    "category": "工作",
    "details": "会议",
    "total": 4368
  },
  {
    "category": "工作",
    "details": "走动/WC",
    "total": 24508
  },
  {
    "category": "工作",
    "details": "开始工作",
    "total": 66756
  }
]
      </textarea>
        <button id="generateCharts" class="mt-4 bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-md transition duration-300 flex items-center">
            <i class="fa fa-refresh mr-2"></i>生成图表
        </button>
    </div>

    <!-- 图表展示区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- 饼状图 -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h2 class="text-xl font-semibold text-gray-700 mb-4">时间分布饼状图（占比）</h2>
            <div class="chart-container">
                <canvas id="timePieChart"></canvas>
            </div>
        </div>

        <!-- 柱状图 -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h2 class="text-xl font-semibold text-gray-700 mb-4">时间分布柱状图（时长）</h2>
            <div class="chart-container">
                <canvas id="timeBarChart"></canvas>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const jsonInput = document.getElementById('jsonInput');
        const generateBtn = document.getElementById('generateCharts');
        const pieCanvas = document.getElementById('timePieChart');
        const barCanvas = document.getElementById('timeBarChart');
        let pieChart = null;
        let barChart = null;

        // 颜色配置（保持两种图表颜色一致）
        const colors = [
            '#3B82F6', '#10B981', '#F59E0B', '#EF4444',
            '#8B5CF6', '#06B6D4', '#EC4899', '#6B7280'
        ];

        // 初始化饼状图
        function initPieChart(data) {
            const labels = data.map(item => `${item.category}-${item.details}`);
            const values = data.map(item => item['total']);

            if (pieChart) pieChart.destroy();

            pieChart = new Chart(pieCanvas, {
                type: 'pie',
                data: {
                    labels: labels,
                    datasets: [{
                        data: values,
                        backgroundColor: colors,
                        borderWidth: 1,
                        borderColor: '#FFFFFF',
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                            labels: {
                                boxWidth: 12,
                                padding: 15,
                                font: { size: 12 }
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return formatTooltip(context, values);
                                }
                            }
                        }
                    }
                }
            });
        }

        // 初始化柱状图
        function initBarChart(data) {
            const labels = data.map(item => `${item.category}-${item.details}`);
            const values = data.map(item => item['total']);

            if (barChart) barChart.destroy();

            barChart = new Chart(barCanvas, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: '时长（秒）',
                        data: values,
                        backgroundColor: colors,
                        borderWidth: 1,
                        borderRadius: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: '时长（秒）'
                            }
                        },
                        x: {
                            ticks: {
                                autoSkip: false,
                                maxRotation: 45,
                                minRotation: 45
                            }
                        }
                    },
                    plugins: {
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return formatTooltip(context, values);
                                }
                            }
                        }
                    }
                }
            });
        }

        // 格式化tooltip内容（时分秒+百分比）
        function formatTooltip(context, allValues) {
            const label = context.label || '';
            const value = context.raw;
            const total = allValues.reduce((a, b) => a + b, 0);
            const percentage = ((value / total) * 100).toFixed(1);
            const hours = Math.floor(value / 3600);
            const minutes = Math.floor((value % 3600) / 60);
            const seconds = value % 60;
            return `${label}: ${hours}小时${minutes}分钟${seconds}秒 (${percentage}%)`;
        }

        // 生成图表
        function generateCharts() {
            try {
                const jsonData = JSON.parse(jsonInput.value.trim());
                initPieChart(jsonData);
                initBarChart(jsonData);
            } catch (error) {
                alert('JSON解析错误，请检查格式：' + error.message);
            }
        }

        // 绑定事件
        generateBtn.addEventListener('click', generateCharts);

        // 初始化图表
        generateCharts();
    });
</script>
</body>
</html>